<template>
  <div class="evaluation-conatiner">
    <div class="start">
      <p>现在时间：{{new Date().getFullYear()}}年{{new Date().getMonth()+1}}月{{new Date().getDate()}}日 {{h}}:{{m}}:{{s}}</p>
      <!-- <a href="">开始评卷</a> -->
      <router-link to="evaluation">开始评卷</router-link>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      h: new Date().getHours(),
      m: new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes(),
      s: new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
    }
  },
  watch: {
    s: {
      handler () {
        setTimeout(()=> {
          this.h = new Date().getHours(),
          this.m = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes(),
          this.s = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
        },1000)
      },
      immediate: true
    }
  }
}
</script>

<style lang="stylus" scoped>
.evaluation-conatiner
  background #4177FF
  height 100%
  display flex
  align-items center
  background url('../assets/img/background.png') no-repeat
  background-size cover
  .start
    width 537px
    margin 0 auto
    height 210px
    background rgba(255,255,255,1)
    box-shadow 0px 2px 6px 0px rgba(65, 255, 119, 0.35)
    border-radius 10px
    text-align center
    p
      color #4177FF
      font-size 24px
      text-align center
      margin-top 30px
    a
      display inline-block
      width 452px
      height 56px
      background #4177FF
      box-shadow 0px 2px 6px 0px rgba(65, 255, 119, 0.35)
      border-radius 4px
      color #fff
      font-size 24px
      line-height 56px
      margin-top 30px
      text-decoration none
</style>
